﻿@page "/datagrid/cell-edit-template"
@using Syncfusion.Blazor.Inputs;
@using Syncfusion.Blazor.DropDowns;
@using Syncfusion.Blazor.Calendars;
@using Syncfusion.Blazor.Grids;
@using System.ComponentModel.DataAnnotations;

<SampleDescription>
    <p>This sample demonstrates the Cell Edit Template in the <a target='_blank' href='https://blazor.syncfusion.com/documentation/datagrid/getting-started/'>Blazor DataGrid</a>.</p>
</SampleDescription>

<ActionDescription>
    <p>The cell edit template feature is used to customize the default cell editors which will be used to add and update the particular cell value. </p>
    <p>To customize a particular cell editor, the EditTemplate property should be used inside the<a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html'>GridColumn</a> component.</p>
    <p>
        In this demo, the following things have been done in the DataGrid component.
        <ol>
            <li> Used <a target='_blank' href='https://blazor.syncfusion.com/documentation/multiselect-dropdown/getting-started/'>MultiSelect</a> component to edit Tags field.</li>
            <li> Used <a target='_blank' href='https://blazor.syncfusion.com/documentation/dropdown-list/getting-started/'>DropDownList</a> component to edit Author Name and Status field.</li>
            
        </ol>
    </p>
    <p>More information on the <a target='_blank' href='https://blazor.syncfusion.com/documentation/datagrid/editing/#cell-edit-template'>cell edit template</a> can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/datagrid/editing/#cell-edit-template'>documentation</a> section.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGrid DataSource="blogs" AllowTextWrap="true" AllowPaging="true" Toolbar="@(new string[] { "Add", "Edit", "Delete", "Update", "Cancel" })">
                <GridEvents OnActionBegin="ActionBeginHandler" TValue="Blog"></GridEvents>
                <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"> </GridEditSettings>
                <GridPageSettings PageSize="8"></GridPageSettings>

                <GridColumns>

                    <GridColumn Field="@nameof(Blog.BlogId)" HeaderText="Blog ID" TextAlign="TextAlign.Left" IsPrimaryKey="true" Width="110" ValidationRules="@(new ValidationRules { Required = true})">

                        <EditTemplate>
                            <SfTextBox ID="BlogId" Placeholder="BLOG-0000" @bind-Value="(context as Blog).BlogId" Enabled="@Check">

                            </SfTextBox>
                        </EditTemplate>
                    </GridColumn>

                    <GridColumn Field="@nameof(Blog.Title)" HeaderText="Title" TextAlign="TextAlign.Left" Width="260"  ValidationRules="@(new ValidationRules { Required = true })"></GridColumn>

                    <GridColumn Field="@nameof(Blog.AuthorName)" HeaderText="Author Name" TextAlign="TextAlign.Left" Width="120">
                        <EditTemplate>
                            @* Using the SfDropdownList *@
                            <SfDropDownList  DataSource="authorNamesList" TValue="string" TItem="BlogAuthorNames" @bind-Value="((context as Blog).AuthorName)">
                                <DropDownListFieldSettings Text="authorNames"></DropDownListFieldSettings>
                            </SfDropDownList>

                        </EditTemplate>
                    </GridColumn>

                    <GridColumn Field="@nameof(Blog.Status)" TextAlign="TextAlign.Center" Width="150"  ValidationRules="@(new ValidationRules { Required = true })">
                        <EditTemplate>
                            <SfDropDownList ID="Status" DataSource="blogStatusList" TValue="string" TItem="BlogStatus" @bind-Value="((context as Blog).Status)">
                                <DropDownListFieldSettings Text="Statuses"></DropDownListFieldSettings>
                            </SfDropDownList>
                        </EditTemplate>

                        <Template>
                            @{
                                var Context = (context as Blog).Status;
                                @if (Context == "Published")
                                {
                                    <div class="title-published">
                                        <span class="font"> @Context </span>
                                    </div>
                                }
                                else if (Context == "Draft")
                                {
                                    <div class="title-draft">
                                        <span class="font"> @Context </span>
                                    </div>
                                }
                                else
                                {
                                    <div class="title-review">
                                        <span class="font">@Context</span>
                                    </div>
                                }
                            }
                        </Template>
                    </GridColumn>

                    <GridColumn Field="@nameof(Blog.Tags)" HeaderText="Tags" TextAlign="TextAlign.Center" Width="170" >
                        <Template>
                            @{
                                var Context = (context as Blog).Tags;
                                @for (int i = 0; i < Context?.Length; i++)
                                {
                                    <div class="tags">@Context[i]</div>
                                }
                            }
                        </Template>
                        <EditTemplate>
                            @* Using the MultiSelect *@
                            <SfMultiSelect @ref="multiSelect" DataSource="bloggerContents" TValue="string[]" TItem="TagContent" @bind-Value="((context as Blog).Tags)">

                                <MultiSelectFieldSettings Value="TagTopic"></MultiSelectFieldSettings>
                            </SfMultiSelect>
                        </EditTemplate>

                    </GridColumn>

                </GridColumns>
            </SfGrid>

            <style>
                .title-published {
                    background: #90F0BD;
                    border-radius: 34px;
                    padding: 8px 16px;
                    text-align: center
                }

                .title-draft {
                    background: #FFE87F;
                    border-radius: 34px;
                    padding: 8px 16px;
                    text-align: center;
                }

                .title-review {
                    background: #A8E9F7;
                    border-radius: 34px;
                    padding: 8px 16px;
                    text-align: center;
                }

                .tags {
                    background: #6c757d;
                    color: #fff;
                    border-radius: 17px;
                    padding: 4px 8px;
                    text-align: center;
                    margin-top: 4px;
                    display:flex;
                    justify-content:center;
                }
            </style>
        </div>
    </div>
</div>

@code
{    
    SfMultiSelect<string[], TagContent> multiSelect;
    public Boolean Check = true;
    public List<Blog> blogs { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        blogs = Enumerable.Range(1, 50).Select((x) => new Blog()
        {
            Title = (new string[] { "Lorem ipsum dolor sit amet consectetur adipiscing elit.", " Fusce nec tellus sed augue semper porta Vestibulum lacinia arcu eget nulla. ", "Aptent taciti sociosqu ad litora conubia nostra per inceptos himenaeos.", "Curabitur sodales ligula in libero sed dignissim lacinia nunc curabitur tortor." })[new Random().Next(4)],
            AuthorName = (new string[] { "ALFKI", "ANTON", "BOLID", "BLONP", "ANATR" })[new Random().Next(5)],
            Status = (new string[] { "Published", "Draft" })[new Random().Next(2)],
            Tags = (new string[] { "Javascript", "Blazor" }),
            BlogId = "BLOG-10" + x           

        }).ToList();
    }

    public void ActionBeginHandler(ActionEventArgs<Blog> args)
    {
        if (args.RequestType == Syncfusion.Blazor.Grids.Action.Save)
        {
            //Save the multiselect value in Grid datasource.
            args.Data.Tags = multiSelect.Value;
        }

        if (args.RequestType.ToString() == "Add")
        {
            Check = true;
        }
        else
        {
            Check = false;
        }
    }

    public class BlogStatus
    {
        public string Statuses { get; set; }
    }

    public List<BlogStatus> blogStatusList = new List<BlogStatus>
    {
        new BlogStatus() {Statuses = "Published"},
        new BlogStatus() {Statuses = "Draft"},
        new BlogStatus() {Statuses = "Review"},

    }.ToList();

    public class BlogAuthorNames
    {
        public string authorNames { get; set; }
    }

    public List<BlogAuthorNames> authorNamesList = new List<BlogAuthorNames>
    {
        new BlogAuthorNames() {authorNames = "ALFKI"},
        new BlogAuthorNames() {authorNames = "BOLID"},
        new BlogAuthorNames() {authorNames = "ANTON"},
        new BlogAuthorNames() {authorNames = "BLONP"},
        new BlogAuthorNames() {authorNames = "ANATR"}

    }.ToList();

    public class TagContent
    {
        public int TagId { get; set; }
        public string TagTopic { get; set; }
    }

    public List<TagContent> bloggerContents = new List<TagContent>
    {
        new TagContent() {TagId = 1 , TagTopic = "Javascript"},
        new TagContent() {TagId = 2 , TagTopic = "Blazor"},
        new TagContent() {TagId = 3 , TagTopic = "ASPNETCORE"},
        new TagContent() {TagId = 4 , TagTopic = "Xamarin"},
        new TagContent() {TagId = 5, TagTopic = "Flutter"}

    }.ToList();

    public class Blog
    {

        [RegularExpression("BLOG-[0-9]*", ErrorMessage = "Blog ID field should start with BLOG-")]
        public string BlogId { get; set; }

        public string Title { get; set; }

        public string AuthorName { get; set; }

        public string Status { get; set; }

        public string[] Tags { get; set; } = new string[] { };   

    }
}

